<template>
  <div>
    <h1>toRef</h1>
    <h3>这obj中的name</h3>
    <h1>{{ obj.name }}</h1>
    <h3>这是ref包裹变为响应</h3>
    <h1>{{ name1 }}</h1>
    <h3>这个是toRef包裹变为响应式</h3>
    <h1>{{ name2 }}</h1>
    <button @click="changeName">更改name值</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef } from "vue";

export default defineComponent({
  setup() {
    const obj = reactive({
      name: "tom",
      age: 10,
    });

    // 将name变为ref对象  当前name string 
    // ref得到的值是独立的是拷贝了一份新数据，在堆中是独立
    const name1 = ref(obj.name);
    console.log(name1);
    // toRef  能将响应式对象上的属性变为一个ref对象 参数一是响应对象  参数二：对象当中的key值（key永远是字符串）
    // toRef的值同源响应对象上的值是同一个空间，改动其中一个数据，另外一个也会改动。
    const name2 = toRef(obj, "name");
    console.log(name2);

    // 查看这两个ref对象有何区别？
    function changeName() {
      // 更改的是name1的值 ref
      // name1.value += "1";
      name2.value += "2";
    }
    return {
      obj,
      name1,
      name2,
      changeName,
    };
  },
});
</script>

<style scoped>
</style>